import { IconMore, IconSetting } from "@douyinfe/semi-icons";
import {
  Badge,
  Button,
  ButtonGroup,
  Dropdown,
  Form,
  Modal,
  Notification,
  Space,
  Toast,
} from "@douyinfe/semi-ui";
import { useEffect, useState } from "react";
import Setting from "./setting";
import http from "../http";
import { DropDownMenuItem } from "@douyinfe/semi-ui/lib/es/dropdown";
import { useSettingStore } from "../store";
import { IGitStatus } from "../types";

function ControllArea({ onPullSuccess }: { onPullSuccess: () => void }) {
  const [openSetting, setOpensetting] = useState(false);
  const [openCommitDialog, setOpenCommitDialog] = useState(false);
  const [status, setStatus] = useState<IGitStatus>({ push: 0, commit: 0 });
  const { showHidden, desc, sortType, update, lastModTime } = useSettingStore();
  useEffect(() => {
    handleGetStatus();
  }, [lastModTime]);
  const menu: DropDownMenuItem[] = [
    {
      node: "item",
      name: "显示隐藏项目",
      active: showHidden,
      onClick: () => {
        update!({
          showHidden: !showHidden,
        });
      },
    },
    { node: "divider" },
    {
      node: "item",
      name: "按照创建时间",
      active: sortType == "creationTime",
      onClick: () => {
        update!({ sortType: "creationTime" });
      },
    },
    {
      node: "item",
      name: "按照修改时间",
      active: sortType == "modTime",
      onClick: () => {
        update!({ sortType: "modTime" });
      },
    },
    { node: "divider" },
    {
      node: "item",
      name: "正序",
      active: desc === false,
      onClick: () => {
        update!({ desc: false });
      },
    },
    {
      node: "item",
      name: "倒序",
      active: desc === true,
      onClick: () => {
        update!({ desc: true });
      },
    },
  ];
  const handlePull = () => {
    const id = Notification.info({
      content: "开始同步",
      title: "git同步",
      duration: 0,
    });
    http.get("/pull").then((x: any) => {
      if (!x.success) {
        Notification.error({
          content: x.msg,
          title: "拉取失败",
          duration: 0,
        });
      } else {
        Toast.success("拉取成功");
        if (onPullSuccess) {
          onPullSuccess();
        }
      }

      Notification.close(id);
    });
  };
  const handleSubmitCommit = (v: { comment: string }) => {
    http.get("/commit?comment=" + v.comment).then((x: any) => {
      if (!x.success) {
        Notification.error({
          content: x.msg,
          title: "提交失败",
          duration: 0,
        });
      } else {
        Toast.success("提交成功");
        handleGetStatus();
      }
      setOpenCommitDialog(false);
    });
  };
  const handlePush = () => {
    http.get("/push").then((x: any) => {
      if (!x.success) {
        Notification.error({
          content: x.msg,
          title: "推送失败",
          duration: 0,
        });
      } else {
        Toast.success("推送成功");
        handleGetStatus();
      }
      setOpenCommitDialog(false);
    });
  };

  const handleGetStatus = () => {
    http.get("/git-status").then((x: any) => {
      setStatus(x.data);
    });
  };

  return (
    <div style={{backgroundColor: 'white'}}>
      <Space
        style={{
          height: "40px",
          padding: "0px 0px",
          borderBottom: "1px solid #ccc",
        }}
        className="flex w-full items-center"
      >
        <Button
          icon={<IconSetting />}
          onClick={() => setOpensetting(true)}
        ></Button>
        <ButtonGroup type={"secondary"} aria-label="操作按钮组">
          <Button onClick={handlePull}>拉取</Button>
          <Badge dot={status.commit > 0} type='danger'>
            <Button onClick={() => setOpenCommitDialog(true)}>提交</Button>
          </Badge>
          <Badge dot={status.push > 0} type='danger'>
            <Button onClick={handlePush}>推送</Button>
          </Badge>
          {/* <Button onClick={handleTest}>测试</Button> */}
        </ButtonGroup>
        <Dropdown position={"bottomRight"} menu={menu} showTick>
          <Button icon={<IconMore />}></Button>
        </Dropdown>
      </Space>

      <Modal
        title="设置"
        visible={openSetting}
        onCancel={() => {
          setOpensetting(false);
        }}
        closeOnEsc={true}
        footer={null}
      >
        <Setting key={"setting"}></Setting>
      </Modal>
      <Modal
        title="git推送"
        visible={openCommitDialog}
        onCancel={() => {
          setOpenCommitDialog(false);
        }}
        closeOnEsc={true}
        footer={null}
      >
        <Form
          initValues={{
            comment:
              new Date().toLocaleDateString() +
              "_" +
              new Date().toLocaleTimeString(),
          }}
          onSubmit={(values) => handleSubmitCommit(values)}
          labelPosition={"left"}
        >
          {() => (
            <>
              <Form.Input field="comment" label="提交信息"></Form.Input>
              <Button
                style={{ marginBottom: "10px" }}
                htmlType="submit"
                className="w-full"
              >
                保存
              </Button>
            </>
          )}
        </Form>
      </Modal>
    </div>
  );
}

export default ControllArea;
